<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-24 14:08:47
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-30 18:09:39
-->
<template>
  <BasicModal v-bind="$attrs" @ok="handleOk" @register="register" title="更新库存" width="800px">
    <div class="container">
      <Description
        :column="4"
        :data="record"
        v-show="record.goods_image"
        :schema="descItemSchema"
      />
      <Table
        :pagination="false"
        :columns="columns"
        rowKey="id"
        :data-source="record.skuList"
        bordered
      >
        <template #goods_props="{ text }">
          <span v-if="!text">单规格</span>
          <template v-else>
            {{ getSku(text) }}
          </template>
        </template>
        <template v-for="col in ['stock_num']" #[col]="{ text, record }" :key="col">
          <div>
            <a-input
              v-if="showEdit"
              v-model:value="editableData[record.id][col]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span v-if="showEdit">
              <a @click="save(record.id)">保存</a>
              <Popconfirm title="是否确定取消" @confirm="cancel(record.id)">
                <a>取消</a>
              </Popconfirm>
            </span>
            <span v-else>
              <a @click="edit(record.id)">编辑</a>
            </span>
          </div>
        </template>
      </Table>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, UnwrapRef } from 'vue';
import { descItemSchema } from './modal.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { Description } from '/@/components/Description/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { getGoodDetail, updateGoodsStock } from '/@/api/goods';
import { GoodsItemModel, GoodsParams, UpdateStockParam } from '/@/api/goods/model/goodsModel';
import { Table, Popconfirm } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
interface DataItem {
  goods_unit: string;
  stock_num: string;
  id: number | string;
}
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
// 弹框的数据记录
const record = ref<GoodsItemModel>({});
const showEdit = ref(false);
const columns = [
  {
    title: '规格SKU',
    dataIndex: 'goods_props',
    slots: { customRender: 'goods_props' },
    width: '20%',
    align: 'center',
  },
  {
    title: '单位',
    dataIndex: 'goods_unit',
    slots: { customRender: 'goods_unit' },
    width: '30%',
    align: 'center',
  },
  {
    title: '库存',
    dataIndex: 'stock_num',
    slots: { customRender: 'stock_num' },
    width: '30%',
    align: 'center',
  },
  {
    title: '修改',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: '20%',
    align: 'center',
  },
];

// 修改
const edit = (key: number) => {
  showEdit.value = true;
  editableData[key] = cloneDeep(record.value.skuList?.filter((item) => key === item.id)[0]);
};
// 保存
const save = (key: number) => {
  showEdit.value = false;
  Object.assign(record.value.skuList?.filter((item) => key === item.id)[0], editableData[key]);
};
// 取消
const cancel = (key: string) => {
  delete editableData[key];
};
// 重新加载
let reload = () => {};

// 获取sku
const getSku = (item) => {
  let { group, value } = item[0];
  return `${group.name}-${value.name}`;
};

//  初始化弹框信息
const callback = async (data) => {
  // 拿到订单id
  let goodsId = data.record.goods_id;
  const { goodsInfo } = await getGoodDetail({ goodsId } as GoodsParams);
  record.value = goodsInfo;
  console.log(goodsInfo);
  reload = data.reload;
};
const [register, { closeModal, setModalProps, changeOkLoading }] = useModalInner(callback);
// 更新库存
const handleOk = () => {
  let arr: any = [];
  for (let key in editableData) {
    let { id, goods_sku_id, goods_id, stock_num } = editableData[key];
    arr.push({ id, goods_sku_id, goods_id, stock_num });
  }
  let params = {
    goodsId: record.value.goods_id,
    form: {
      skuList: arr,
    },
  } as UpdateStockParam;
  changeOkLoading(true);
  updateGoodsStock(params)
    .then((res) => {
      console.log(res);
    })
    .finally(() => changeOkLoading(false));
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>